<template>
  <div v-show="!flag">
    <el-card>
      <div class="top-search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="部门名称">
            <el-input v-model="formInline.user" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="部门描述">
            <el-input v-model="formInline.user" placeholder="请输入角色描述" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card>
      <div class="btn-list">
        <el-button type="primary" @click="cliAdd">新增</el-button>
      </div>
      <el-table
        :data="tableData.list"
        v-loading="loading"
        element-loading-text="加载中..."
        stripe
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column
          prop="departmentName"
          label="部门名称"
          width="250"
          align="center"
        >
          <template #default="scope">
            <div class="modality" @click="selectRoleList(scope.row)">
              {{ scope.row.departmentName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="describes" label="部门描述" align="center" />
        <el-table-column fixed="right" label="操作" align="center" width="180">
          <template #default="scope">
            <el-button type="primary" size="small" link>分配资源</el-button>
            <el-button type="warning" size="small" link>修改</el-button>
            <el-button
              type="danger"
              size="small"
              link
              @click="delClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <!-- 分页 -->
        <Paging
          :total="total"
          :currentPage.sync="page.mount"
          :pageSize.sync="page.size"
          @pagination="handlePageChange"
        ></Paging>
      </div>
    </el-card>
  </div>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增部门"
    width="40%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="部门名称 ">
          <el-input
            v-model="form.departmentName"
            placeholder="请输入部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门描述 ">
          <el-input
            v-model="form.describes"
            :rows="2"
            type="textarea"
            placeholder="请输入部门描述"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOk"> 确 认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 部门下  角色列表 -->
  <div v-if="flag">
    <roleDetails :departmentDetails="rowDetails"></roleDetails>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
// 引入自定义请求库
import {
  postAction,
  putAction,
  getAction,
  deleteAction,
} from "@/utils/system/commonUse";
import Paging from "@/components/basePage/packagePaging/index.vue";

import roleDetails from "./modules/roleDetails.vue";

onMounted(() => {
  getList();
});
// 服务器地址
const url = reactive({
  getRoleApi: "/system/department/queryDataByPage",
  addRoleApi: "/system/department/save",
  delRoleApi: "/system/department/delete",
});

// 加载中
const loading = ref(false);

// 条数
const total = ref(0);
const page = reactive({
  size: 10, // 长度
  mount: 1, // 页码
});
// 分页器
const handlePageChange = (data: any) => {
  page.mount = data.currentPage;
  page.size = data.pageSize;
  getList();
};

/**
 * 获取表格数据
 */
const getList = () => {
  loading.value = true;
  getAction(url.getRoleApi, page)
    .then((data: any) => {
      console.log("查询===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      total.value = data.data.count;
      tableData.list = data.data.data;
      loading.value = false;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
      loading.value = false;
    });
};

/**
 * 删除部门
 */
const delClick = (id: string) => {
  deleteAction(`${url.delRoleApi}/${id}`)
    .then((data: any) => {
      console.log("data", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      ElMessage.success(data.msg);
      getList();
    })
    .catch((err) => {
      console.log("err", err);
      ElMessage.error("删除失败");
    });
};

// 数据
const tableData = reactive({ list: Array() });
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

// 新增模态框
const dialogVisible = ref(false);

const cliAdd = () => {
  dialogVisible.value = true;
};

const handleClose = (done: () => void) => {
  done();
};
// 添加表单
const form = reactive({
  departmentName: "",
  describes: "",
});
const formInline = reactive({
  radio1: "采矿权",
  radio2: "挂牌公告",
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};
// 控制显示详情  还是 部门页面
const flag = ref(false);
// 获取行内id
const rowDetails = reactive({
  id: "",
  title: "",
});
/**
 * 获取角色详情
 */
const selectRoleList = (row: any) => {
  rowDetails.id = row.id;
  rowDetails.title = row.departmentName;
  flag.value = true;
};
/**
 * 添加部门
 */
const addOk = () => {
  postAction(url.addRoleApi, form)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      console.log("data==>", data);
      ElMessage.success("添加成功");
      getList();
      dialogVisible.value = false;
    })
    .catch((err) => {
      console.log("err==>", err);
      dialogVisible.value = false;
    });
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
.modality {
  cursor: pointer;
  color: #1890ff;
}
</style>
